var postion1 = {x: 100, y: 100, rotation: 0};
var postion2 = {x: 100, y: 300, rotation: 0};
var tween1, tween2, target1, target2;

//初始化
function init() {
    target1 = document.getElementById('target1');
    tween1 = new TWEEN.Tween(postion1)
            .to({
                x: 700, y: 200, rotation: 360 
            }, 2000)
            .easing(TWEEN.Easing.Elastic.InOut)
            .onUpdate(function(obj) {
                updateBox(target1, obj);
            });

    target2 = document.getElementById('target2');
    tween2 = new TWEEN.Tween(postion2)
            .to({
                x: 500, rotation: 360
            }, 2000)
            .easing(TWEEN.Easing.Elastic.InOut)
            .onUpdate(function(obj) {
                updateBox(target2, obj);
            });

    tween1.start('+4000');
    tween2.start('-1000');
}

//动画函数
function animate() {
    var id = requestAnimationFrame(animate);
    var result = TWEEN.update();
    if(!result) cancelAnimationFrame(id);
}

//处理函数
function updateBox(target, obj) {
    target.style.left = obj.x + 'px';
    target.style.top = obj.y + 'px';
    target.style.webkitTransform = 'rotate(' + Math.floor(obj.rotation) + 'deg)';
    target.style.MozTransform = 'rotate(' + Math.floor(obj.rotation) + 'deg)';
}

init();
animate();